<template>
  <BaseInput2 v-model:title="bookTitle"></BaseInput2>
  <p>bookTitle: {{ bookTitle }}</p>
  <!--  <BaseInput label="Title" v-model:value="bookTitle1" v-bind="$attrs"/>-->
  <BaseInput label="Title" v-model:value="bookTitle1" class="xx"/>
  Same Title: <input :value="bookTitle1" @input="e => bookTitle1 = e.target.value"/>
  <p>bookTitle1: {{ bookTitle1 }}</p>
  <div><a href="https://vue-multiselect.js.org/">vue multiselect</a></div>
  <div>
    <span>Button Component</span>
    <BaseButton class="button -fill-gradient">Submit</BaseButton>
  </div>
  <div>
    <span>Select Component</span>
    <BaseSelect v-model:value="selectValue"></BaseSelect>
    {{ selectValue }}
  </div>
  <hr>
  <h1>VuelidateExample</h1>
  <VuelidateExample></VuelidateExample>
  <hr>
  <h1>Mixins</h1>
  <BaseInput3Mixin v-bind:title="bookTitle1" v-on:update:title="bookTitle1 = $event"/>
<!--  <BaseInput3Mixin v-model:title="bookTitle1"/>-->
</template>

<script>
import BaseInput from "./BaseInput.vue";
import { createApp, ref, reactive, computed, onMounted } from 'vue';
import { createStore, useStore, mapState, mapGetters } from 'vuex';
import BaseInput2 from "./BaseInput2.vue";
import BaseButton from "./BaseButton.vue";
import BaseSelect from "./BaseSelect.vue";
import VuelidateExample from "./VuelidateExample.vue";
import BaseInput3Mixin from "./BaseInput3Mixin.vue";

export default {
  name: "BaseForm",
  components: {BaseInput3Mixin, VuelidateExample, BaseSelect, BaseButton, BaseInput2, BaseInput},
  data() {
    return {bookTitle: 'book2', bookTitle1: 'book1', selectValue: ''}
  }
}
</script>
